import React, { Component } from 'react';
import { DeviceEventEmitter, Image, InteractionManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import order from '@/api/order';
import { msg, DashLine } from '@/common';
import { calculatJD, orderPayWay } from '@/common/util';
import { px2dp } from '@/styles';
import {
  iconLeftWhite,
  orderCancel,
  orderRight,
  iconPayWhite,
} from '@/images';

// import JfItem from '../order-details-new/components/JfItem';
// import GoldbeanBottom from '../order-details-new/components/goldbean-bottom';

export default class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.state = { orderDetail: {}, info: {}, isModal: false, allianceMemId: '' };
  }

  computedMount = () => {
    const { info } = this.state;
    const yfAmount = parseFloat(info && info.amount) + parseFloat(info && info.integral);
    if (yfAmount) {
      return calculatJD(yfAmount);
    }
    return '';
  }

  render() {
    const { info } = this.state;
    const integral = calculatJD(info && info.integral);
    const amount = calculatJD(info && info.amount);
    const payWay = orderPayWay(info && info.payChannel);
    const payChannel = info && info.payChannel;
    return (
      <View style={styles.container}>
        <View onLayout={(event) => this.onLayout(event)}>
          <LinearGradient
            start={{ x: 0.0, y: 0 }}
            end={{ x: 1, y: 0 }}
            colors={['rgba(229,184,103,1)', 'rgba(187,147,75,1) 100%)',]}
            style={{ width: '100%', height: 160, }}
          >
            <TouchableOpacity
              style={styles.backDot}
              onPress={this.onBackPress}
            >
              <Image
                style={styles.backImg}
                resizeMode='stretch'
                source={iconLeftWhite}
              />
            </TouchableOpacity>
            <View style={styles.center}>
              {
                info && info.status === 5 ?
                  <View style={styles.btnWrap}>
                    <Image
                      source={orderCancel}
                      style={styles.image}
                    />
                    <Text style={styles.btnTextStyle}>已取消</Text>
                  </View>
                  : (info && info.status === 4 ?
                    <View style={styles.btnWrap}>
                      <Image
                        source={orderRight}
                        style={styles.image}
                      />
                      <Text style={styles.btnTextStyle}>已支付</Text>
                    </View>
                    : (
                      info && info.status === 0 ?
                        <View style={styles.btnWrap}>
                          <Image
                            source={iconPayWhite}
                            style={styles.image}
                          />
                          <Text style={styles.btnTextStyle}>待支付</Text>
                        </View>
                        : null
                    ))
              }

            </View>
          </LinearGradient>
          <View style={styles.main}>
            <Text style={[styles.f18, styles.bBlack]}>订单明细</Text>
            <View style={styles.orderLine} />
            <View style={styles.flexB}>
              <Text>商品名称:</Text>
              <Text>{info && info.productName}</Text>
            </View>
            <View style={styles.flexB}>
              <Text>油卡卡号:</Text>
              <Text>{info && info.oilAccountNo}</Text>
            </View>
            <View style={styles.flexB}>
              <Text>订单编号:</Text>
              <Text>{info && info.orderNo}</Text>
            </View>
            <View style={styles.flexB}>
              <Text>下单时间:</Text>
              <Text>{info && info.orderTime}</Text>
            </View>
            {
              info && info.status !== 0 && info.status !== 5 ?
                <View style={styles.flexB}>
                  <Text>支付时间:</Text>
                  <Text>{info && info.payTime}</Text>
                </View> : null
            }
            {info && info.payChannel != 0 ? <View style={styles.flexB}>
              <Text>支付方式:</Text>
              <Text>{payWay}</Text>
            </View> : null}
            <View style={[styles.flexB, styles.bBlack, { marginTop: 16, }]}>
              <Text style={styles.bBlack}>充值金额:</Text>
              <Text style={styles.bBlack}>
                ¥
                {this.computedMount()}
              </Text>
            </View>
            <DashLine />
            {/* 去除金豆 */}
            {/* <View style={[styles.flexB, styles.bBlack]}>
              <Text style={styles.bBlack}>金豆抵扣：</Text>
              <Text style={styles.bBlack}>¥{integral}</Text>
            </View> */}
            <View style={[styles.flexB, styles.bBlack]}>
              <Text style={styles.bBlack}>{info && info.status === 4 ? '实付金额' : '应付金额：'}</Text>
              <Text style={styles.bBlack}>
                ¥
                {amount}
              </Text>
            </View>
            {info && info.status === 0 ?
              <View>
                <View style={{ flexDirection: 'row', marginTop: 12, justifyContent: 'flex-end' }}>
                  <TouchableOpacity
                    activeOpacity={0.5}
                    style={[styles.btnStyle, styles.borderC, payChannel != 6 && payChannel != 11 && { marginRight: 16 }]}
                    onPress={this._cancel}
                  >
                    <Text style={styles.loginText}>取消</Text>
                  </TouchableOpacity>
                  {
                    payChannel != 6 && payChannel != 11 ?
                      <View
                        style={[styles.btnStyle, { backgroundColor: 'rgba(186,145,74,1)' }]}
                      >
                        <TouchableOpacity onPress={this._toPay}>
                          <Text style={styles.white}>去支付</Text>
                        </TouchableOpacity>
                      </View> : null
                  }

                </View>
              </View>

              : null}
          </View>
          {/* <View
            style={info && info.status !== 5 ?
              [styles.jdWrapStyle, {padding: px2dp(12) * 2}] :
              styles.jdWrapStyle}
            >
            {
              info && info.status !== 5 ?

              (info.integtalLiantong && Number(info.integtalLiantong) > 0)
                || (info.integtalLiaintegralGuangfatong && Number(info.integralGuangfa) > 0) ?
                <GoldbeanBottom orderDetail={info} /> :
                 <JfItem orderDetail={info} />
                : null
            }
          </View> */}
        </View>
      </View>

    );
  }

  onBackPress = () => {
    const toDetail = this.props.navigation &&
      this.props.navigation.state &&
      this.props.navigation.state.params &&
      this.props.navigation.state.params.toDetail;
    if (toDetail == 0) {
      msg.emit('router: back');
    } else {
      msg.emit('router: goToNext', {
        routeName: 'Order'
      });
    }
  }

  callBacks(e) {
    const { info } = this.state;
    if (e == 1) {
      order.closeOrderApp({ orderNo: info && info.orderNo }).then(res => {
        if (res.success) {
          DeviceEventEmitter.emit('updateOrder', true);
          this._orderDetail(info && info.orderNo);
        } else {
          msg.emit('app:messageBox', {
            isVisible: true,
            title: '提示',
            text: res.msg,
            okText: '确定',
            isClickBg: false,
          });
        }
      }).catch(res => {
        msg.emit('app:messageBox', {
          isVisible: true,
          title: '提示',
          text: res.msg,
          okText: '确定',
          isClickBg: false,
        });
      });
    }
  }

  _cancel = () => {
    msg.emit('app:messageBox', {
      isVisible: true,
      title: '提示',
      text: '确认要取消订单吗',
      okText: '确定',
      cancelText: '取消',
      okFn: () => {
        this.callBacks(1);
      },
    });
  }

  _toPay = (e) => {
    const { info, allianceMemId } = this.state;
    e.stopPropagation();
    info.amountNeed = calculatJD(Number(info.amount) + Number(info.integral));
    msg.emit('router: goToNext', {
      routeName: 'PayOrder',
      data: Object.assign(info, { goodsName: info && info.productName }),
      routerFrom: 'oilCard',
      allianceMemId
    });
  }

  onRequestClose() {
    this.setState({
      isModal: false
    });
  }

  showModal() {
    this.setState({
      isModal: true
    });
  }

  onLayout = (event) => {
    topHeight = event.nativeEvent.layout.height;
  }

  componentDidMount() {
    const orderNo = this.props.navigation &&
      this.props.navigation.state &&
      this.props.navigation.state.params &&
      this.props.navigation.state.params.orderNo || '';
    InteractionManager.runAfterInteractions(() => {
      this._orderDetail(orderNo);
    });
  }

  _orderDetail(data) {
    order.orderDetail({ orderNo: data }).then(res => {
      if (res.success) {
        const info = res.data;
        this.setState({ info, allianceMemId: res.data.allianceMemId });
      } else {
        msg.emit('app:messageBox', {
          isVisible: true,
          title: '提示',
          text: res.msg,
          okText: '确定',
          isClickBg: false,
        });
      }
    }).catch(res => {
      msg.emit('app:messageBox', {
        isVisible: true,
        title: '提示',
        text: res.msg,
        okText: '确定',
        isClickBg: false,
      });
    });
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent:'center',
    // alignItems:'center',
    backgroundColor: '#F5F4F2',
    height: '100%',
    // alignItems:'center',
  },
  Text: {
    color: '#999796'
  },
  f18: {
    fontSize: px2dp(18) * 2
  },
  active: {
    color: '#FE8C19'
  },
  center: {
    alignItems: 'center'
  },

  bBlack: {
    color: '#333232'
  },
  bGray: {
    color: '#999796'
  },
  center: {
    alignItems: 'center'
  },
  flexB: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: px2dp(40) * 2
  },
  bWhite: {
    backgroundColor: '#fff'
  },
  white: {
    color: '#fff'
  },
  btnStyle: {
    width: px2dp(80) * 2,
    height: px2dp(30) * 2,
    borderRadius: 4,
    borderWidth: px2dp(1),
    borderColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',

  },
  image: {
    width: px2dp(18) * 2,
    height: px2dp(18) * 2
  },
  borderC: {
    borderColor: '#CCCAC8',
  },
  main: {
    // maxWidth:350,

    margin: px2dp(16) * 2,
    borderRadius: px2dp(12) * 2,
    backgroundColor: '#fff',
    marginTop: -30,
    padding: px2dp(12) * 2
  },
  itemFlexB: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: px2dp(16) * 2
    // alignItems:'center'
  },
  item: {
    borderRadius: 12,
    backgroundColor: '#FFF',
    marginBottom: px2dp(12) * 2,
    marginLeft: px2dp(12) * 2,
    marginRight: px2dp(12) * 2,
    padding: px2dp(12) * 2
  },
  mt12: {
    marginTop: px2dp(12) * 2
  },
  modalViewStyle: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
  },
  footer: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  backDot: {
    width: px2dp(66) * 2,
    height: px2dp(66) * 2,
    padding: px2dp(20) * 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backImg: {
    width: px2dp(26) * 2,
    height: px2dp(26) * 2,
  },
  btnTextStyle: {
    fontSize: px2dp(20) * 2,
    color: '#fff',
    marginLeft: px2dp(8) * 2
  },
  btnWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  orderLine: {
    height: 1,
    backgroundColor: '#E6E3E1',
    marginTop: px2dp(16) * 2,
    marginBottom: px2dp(16) * 2
  },
  jdWrapStyle: {
    marginTop: 1,
    margin: px2dp(16) * 2,
    borderRadius: px2dp(12) * 2,
    backgroundColor: '#fff'
  },
  jdInner: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  jdIcon: {
    marginRight: px2dp(2) * 2,
    width: px2dp(36) * 2,
    height: px2dp(22) * 2
  }
});
